<template>
    <app-dialog v-model="show" width="615px" title="修改代理" @open="handleOpen">
        <template #fit_title>
            {{ state.dialogData.name }}
        </template>

        <div class="ip_dialog">
            <div class="ip_header">
                <el-radio-group v-model="state.dialogData.environment_data.proxy.mode">
                    <el-radio v-for="item in state.map.procyMode" :key="item.value" :value="item.value">{{ item.label
                    }}</el-radio>
                </el-radio-group>
                <app-button @click="state.quoteipDialog.show = true">引用代理</app-button>
            </div>

            <div class="ip_body">
                <el-scrollbar max-height="calc(100vh - 245px)">
                    <div class="ip_list">

                        <div class="item" v-if="state.dialogData.environment_data.proxy.mode == 1">
                            <div class="label">服务商:</div>
                            <div class="value">
                                <el-select v-model="state.dialogData.environment_data.proxy.facilitator"
                                    placeholder="选择服务商" style="width: 100%">
                                    <el-option v-for="item in state.map.facilitatorList" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </div>
                        </div>

                        <div class="item">
                            <div class="label">代理类型:</div>
                            <div class="value">
                                <div class="flex" style="width: 100%;">
                                    <el-select v-model="state.dialogData.environment_data.proxy.type"
                                        placeholder="选择代理类型" style="flex: 1;">
                                        <el-option v-for="item in state.map.procyType" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                    <el-select
                                        v-if="state.dialogData.environment_data.proxy.type == 'Lumauto' || state.dialogData.environment_data.proxy.type == 'Luminati' || state.dialogData.environment_data.proxy.type == 'Iphtml'"
                                        v-model="state.dialogData.environment_data.proxy.proxyType" placeholder="选择"
                                        style="width: 120px;margin-left: 12px;">
                                        <el-option v-for="item in state.map.proxyTypeOptions" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </div>

                                <div class="text2" v-if="state.dialogData.environment_data.proxy.type == '-1'">
                                    将使用本机IP，更换上网地点或电脑时IP将变化</div>
                            </div>
                        </div>

                        <div class="item"
                            v-if="state.dialogData.environment_data.proxy.type != -1 && state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">代理主机:</div>
                            <div class="value">
                                <el-input v-model="state.dialogData.environment_data.proxy.host" style="width: 100%"
                                    placeholder="代理主机" />
                                <div class="text2">可按‘主机:端口:账号:密码’或‘主机:端口’格式粘贴</div>
                            </div>
                        </div>

                        <div class="item"
                            v-if="state.dialogData.environment_data.proxy.type != -1 && state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">代理端口:</div>
                            <div class="value">
                                <el-input v-model="state.dialogData.environment_data.proxy.port" style="width: 100%"
                                    placeholder="代理端口" />
                            </div>
                        </div>

                        <div class="item"
                            v-if="state.dialogData.environment_data.proxy.type != -1 && state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">代理账号:</div>
                            <div class="value">
                                <el-input v-model="state.dialogData.environment_data.proxy.username" style="width: 100%"
                                    placeholder="代理账号" />
                            </div>
                        </div>

                        <div class="item"
                            v-if="state.dialogData.environment_data.proxy.type != -1 && state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">代理密码:</div>
                            <div class="value">
                                <el-input v-model="state.dialogData.environment_data.proxy.password" style="width: 100%"
                                    placeholder="代理密码" />
                            </div>
                        </div>

                        <div class="item"
                            v-if="(state.dialogData.environment_data.proxy.type == 'Oxylabsauto' || state.dialogData.environment_data.proxy.type == 'Lumauto' || state.dialogData.environment_data.proxy.type == 'smartproxy' || state.dialogData.environment_data.proxy.type == 'Iphtml' || state.dialogData.environment_data.proxy.type == 'IPIDEA') && state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">IP:</div>
                            <div class="value">
                                <el-input v-model="state.dialogData.environment_data.proxy.ip" style="width: 100%"
                                    placeholder="IP地址" />
                            </div>
                        </div>

                        <div class="item"
                            v-if="(state.dialogData.environment_data.proxy.type == 'Oxylabsauto' || state.dialogData.environment_data.proxy.type == 'Lumauto' || state.dialogData.environment_data.proxy.type == 'smartproxy' || state.dialogData.environment_data.proxy.type == 'Iphtml' || state.dialogData.environment_data.proxy.type == 'IPIDEA') && state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">国家/地区:</div>
                            <div class="value">
                                <el-select v-model="state.dialogData.environment_data.proxy.country"
                                    placeholder="选择国家/地区" style="width: 100%">
                                    <el-option v-for="item in state.map.countryOptions" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </div>
                        </div>

                        <div class="item"
                            v-if="(state.dialogData.environment_data.proxy.type == 'Oxylabsauto' || state.dialogData.environment_data.proxy.type == 'Lumauto' || state.dialogData.environment_data.proxy.type == 'smartproxy' || state.dialogData.environment_data.proxy.type == 'Iphtml' || state.dialogData.environment_data.proxy.type == 'IPIDEA') && state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">州/省:</div>
                            <div class="value">
                                <el-input v-model="state.dialogData.environment_data.proxy.province"
                                    :disabled="state.dialogData.environment_data.proxy.country == ''"
                                    style="width: 100%" placeholder="请输入州/省（建议英文）" />
                            </div>
                        </div>

                        <div class="item"
                            v-if="(state.dialogData.environment_data.proxy.type == 'Oxylabsauto' || state.dialogData.environment_data.proxy.type == 'Lumauto' || state.dialogData.environment_data.proxy.type == 'smartproxy' || state.dialogData.environment_data.proxy.type == 'Iphtml' || state.dialogData.environment_data.proxy.type == 'IPIDEA') && state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">城市:</div>
                            <div class="value">
                                <el-input v-model="state.dialogData.environment_data.proxy.city"
                                    :disabled="state.dialogData.environment_data.proxy.country == ''"
                                    style="width: 100%" placeholder="请输入城市（建议英文）" />
                            </div>
                        </div>

                        <div class="item" v-if="state.dialogData.environment_data.proxy.mode == 1">
                            <div class="label">提取方式:</div>
                            <div class="value">
                                <el-select v-model="state.dialogData.environment_data.proxy.extractModel"
                                    placeholder="提取方式" style="width: 100%">
                                    <el-option v-for="item in state.map.extractModel" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </div>
                        </div>

                        <div class="item" v-if="state.dialogData.environment_data.proxy.mode == 1">
                            <div class="label">提取链接:</div>
                            <div class="value">
                                <el-input v-model="state.dialogData.environment_data.proxy.extractUrl"
                                    style="width: 100%" placeholder="提取链接" />
                            </div>
                        </div>

                        <div class="item" v-if="state.dialogData.environment_data.proxy.type != -1">
                            <div class="label">代理协议:</div>
                            <div class="value">
                                <el-radio-group v-model="state.dialogData.environment_data.proxy.agreement">
                                    <el-radio value="-1">速度优先</el-radio>
                                    <el-radio value="IPv4">IPv4</el-radio>
                                    <el-radio value="IPv6">IPv6</el-radio>
                                </el-radio-group>
                            </div>
                        </div>

                        <div class="item" v-if="state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">IP查询渠道:</div>
                            <div class="value">
                                <el-select v-model="state.dialogData.environment_data.proxy.channel"
                                    placeholder="选择查询渠道" style="width: 100%">
                                    <el-option v-for="item in state.map.channelOptions" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </div>
                        </div>

                        <div class="item"
                            v-if="state.dialogData.environment_data.proxy.type != -1 && state.dialogData.environment_data.proxy.mode == 0">
                            <div class="label">IP变更提醒</div>
                            <div class="value">
                                <el-switch v-model="state.dialogData.environment_data.proxy.changeWarn" />
                            </div>
                        </div>

                        <div class="item">
                            <div class="label"></div>
                            <div class="value">
                                <app-button @click="clickcheckIP"
                                    v-if="state.dialogData.environment_data.proxy.is_check == 0 || state.dialogData.environment_data.proxy.is_check == 2">检查网络</app-button>
                                <template v-if="state.dialogData.environment_data.proxy.is_check == 1">
                                    <div class="flex">
                                        <app-button class="flex" style="opacity: .8;">
                                            <app-loader :loading="loading" style="width: 16px;height: 16px;" />
                                            <div style="margin-left: 8px;">检查网络中</div>
                                        </app-button>
                                        <div style="margin-left: 24px;cursor: pointer;color: #3569fd;font-size: 14px;"
                                            @click="clickcancelCheckip">取消</div>
                                    </div>

                                </template>
                                <template v-if="state.dialogData.environment_data.proxy.is_check == 2">
                                    <div class="checkip_text"
                                        :style="state.dialogData.environment_data.proxy.ip_check_text.status == 0 ? 'color: #F56C6C' : 'color: #67C23A'">
                                        <div class="flex">
                                            <img v-if="state.dialogData.environment_data.proxy.ip_check_text.status == 1"
                                                src="@/assets/home/success_icon.png" style="width: 16px;height: 16px;"
                                                alt="">
                                            <img v-if="state.dialogData.environment_data.proxy.ip_check_text.status == 0"
                                                src="@/assets/home/error_icon.png" style="width: 17px;height: 17px;"
                                                alt="">
                                            <div style="margin-left: 8px;">{{
                                                state.dialogData.environment_data.proxy.ip_check_text.status
                                                    == 0 ? '连接测试失败'
                                                    : '连接测试成功' }}</div>
                                        </div>
                                        <div class="flex">
                                            <div>IP：{{ state.dialogData.environment_data.proxy.ip_check_text.ip }}</div>
                                            &nbsp;&nbsp;&nbsp;
                                            <div>国家/地区：{{ state.dialogData.environment_data.proxy.ip_check_text.country
                                                }}</div>
                                            &nbsp;&nbsp;&nbsp;
                                            <div>时区：{{ state.dialogData.environment_data.proxy.ip_check_text.timezone }}
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>

                    </div>
                </el-scrollbar>
            </div>
        </div>

        <template #footer>
            <app-button @click="handleClose">取消</app-button>
            <app-button class="app-button-ptn" style="margin-left: 8px;" @click="clickSubmit()">确定</app-button>
        </template>

        <app-dialog-quoteip v-model="state.quoteipDialog.show" :data="state.dialogData" @change="changeQuoteip" />
    </app-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const { store, state } = inject('storejs')
const handleOpen = () => {
}
const loading = ref(true)
const handleClose = () => {
    show.value = false
    state.dialogData = {}
}

const clickcheckIP = () => {
    state.dialogData.environment_data.proxy.is_check = 1

    setTimeout(() => {
        if (state.dialogData.environment_data.proxy.is_check != 0) {
            state.dialogData.environment_data.proxy.is_check = 2
        }
    }, 5000);
}

const clickcancelCheckip = () => {
    state.dialogData.environment_data.proxy.is_check = 0
}

const clickSubmit = () => {
    let body = JSON.parse(JSON.stringify(state.dialogData.environment_data))
    body.id = state.dialogData.id
    body.number = state.dialogData.number
    body.name = state.dialogData.name
    body.remark = state.dialogData.remark ? state.dialogData.remark : ''
    http.put('/environment/update_environment', body).then((res) => {
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        handleClose()
        store.getEnvironmentList()
    })
}

const changeQuoteip = (row) => {
    console.log(row)
    state.dialogData.environment_data.proxy = row
}
</script>

<style lang="scss" scoped>
.ip_dialog {
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;

    .ip_header {
        display: flex;
        justify-content: space-between;
        padding: 24px;
    }

}

.ip_list {
    padding: 0 24px;
    display: flex;
    flex-direction: column;

    .item:not(:first-child) {
        margin-top: 16px;
    }

    .item {
        display: flex;

        .label {
            width: 120px;
            padding-right: 8px;
            height: 32px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 14px;
            color: #1d2129;
        }

        .value {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .text {
                margin-top: 8px;
                color: #00000073;
                font-size: 14px;
            }

            .text2 {
                margin-top: 8px;
                color: #00000073;
                font-size: 12px;
            }
        }
    }
}

.flex {
    display: flex;
    align-items: center;
}

.checkip_text {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    font-size: 14px;
}
</style>